<template>
  <div class="box flex-box">
    <!-- <div class="header">
      <PlaneHeader/>
    </div> -->
    <div class="header_group_nav flex-box">
      <div
        class="nav flex"
        :class="{checked: list_index == index}"
        v-for="(item, index) in list"
        :key="index"
        @click="showList(index)"
      >{{ item.title }}</div>
    </div>

    <keep-alive>
      <router-view/>
    </keep-alive>
    <!-- <BbsListBox :show="list_index == index" :type="item.type" v-for="(item, index) in list" :key="index"/> -->
  </div>
</template>

<script>
import PlaneHeader from "@/components/common/PlaneHeader.vue";
import BbsListBox from "@/components/home/BbsListBox.vue";

export default {
  name: "BbsGroup",
  data() {
    return {
      list_index: 0,
      list: [
        {
          type: 0,
          title: "推荐"
        },
        {
          type: 1,
          title: "关注"
        },
        {
          type: 2,
          title: "热点"
        },
        {
          type: 3,
          title: "精华"
        }
      ]
    };
  },
  components: {
    PlaneHeader,
    BbsListBox
  },
  methods: {
    showList(index) {
      this.list_index = index;
      this.$router.replace({
        path: "/bbsGroup/bbsListBox",
        query: {
          type: index
        }
      });
    }
  },
  computed: {},
  created() {}
  // beforeRouteEnter (to, from, next) {
  //   console.log('asdasdasdasdassa');
  // },
};
</script>
<style scoped lang="less">
.box {
  height: 100%;
  flex-direction: column;
}
.header_group_nav_height {
  height: 1.75rem;
}
.header_group_nav {
  box-shadow: 0 0px 5px #000;
  .nav {
    font-weight: 700;
    color: #555;
    text-align: center;
    height: 1.75rem;
    line-height: 1.8rem;
    &.checked {
      border-bottom: 0.1rem solid #555;
    }
  }
}
.list_box {
  overflow: auto;
}
</style>
